<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      immediate-check
    >
      <van-cell
        class="new_list"
        v-for="item in listData"
        :key="item.id"
        @click="read(item.id)"
      >
        <!-- 左侧 -->
        <template #title>
          <div class="new_list_left">
            <div class="new_title">{{ item.title }}</div>
            <div class="new_label">{{ item.description }}</div>
            <span class="new_scdz">
              <van-icon name="browsing-history-o" />
              收藏({{ item.lovenum }})
            </span>
            <span class="new_scdz">
              <van-icon name="good-job-o" />
              点赞({{ item.click }})
            </span>
          </div>
        </template>
        <!-- 右侧 -->
        <template #right-icon>
          <img
            class="new_list_right"
            :src="'http://124.223.14.236:8060/' + item.pic"
          />
        </template>
      </van-cell>
    </van-list>
  </div>
</template>

<script>
import { sortList } from '@/api/register'
export default {
  data() {
    return {
      listData: [],
      page: 1,
      loading: false,
      finished: false
    }
  },
  created() {},
  methods: {
    async onLoad() {
      const res = await sortList(this.page, this.$route.query.id)
      this.listData = [...this.listData, ...res.data.data.list.data]
      this.loading = false
      this.page++
      if (res.data.data.list.data.length === 0) {
        this.finished = true
      }
    },
    read(id) {
      this.$router.push({
        path: '/actile',
        query: { id }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.new_list {
  display: flex;
  justify-content: space-between;
  .new_list_left {
    flex: 1;
    .new_label {
      color: #969799;
      font-size: 12px;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      overflow: hidden;
    }
    .new_scdz {
      color: #969799;
      font-size: 12px;
    }
  }
  .new_list_right {
    margin-left: 8px;
    flex: 1;
    height: 100px;
  }
}
</style>
